<template>
    <div class="app-container">
        <h3>基本信息</h3>
        <el-form ref="collectionOrder" :model="collectionOrder" label-width="150px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="案件日期:">
                        <span>{{formatDate(collectionOrder.collectionDate, 'yyyy-MM-dd')}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车牌号:">
                        <span>{{collectionOrder.plateNo}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户名称:">
                        <span>{{collectionOrder.customerName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户类型:">
                        <span>{{collectionOrder.customerType}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="驾驶员:">
                        <span>{{collectionOrder.driverName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合作类型:">
                        <span>{{collectionOrder.driverType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="作业地点:">
                        <span>{{collectionOrder.workPlace}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="卸车地点:">
                        <span>{{collectionOrder.unloadPlace}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="挂账总金额:">
                        <span>{{collectionOrder.guaZhangAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="折扣金额:">
                        <span>{{collectionOrder.duiZhangAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="加公里数金额及差额:">
                        <span>{{collectionOrder.gongLiAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="应收金额:">
                        <span>{{collectionOrder.totalAmount}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="收款金额:">
                        <span>{{collectionOrder.backAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="收款方式:">
                        <span>{{collectionOrder.backType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="未收金额:">
                        <span>{{collectionOrder.waitPayAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="支付方式:">
                        <span>{{collectionOrder.payTypeName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="返点:">
                        <span>{{collectionOrder.rebates*100}}%</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="返点金额:">
                        <span>{{collectionOrder.rebatesAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="实际营业额:">
                        <span>{{collectionOrder.turnOverAmount}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="备注:">
                        <span>{{collectionOrder.comments}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="还款时间:">
                        <span>{{collectionOrder.backDate}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="差额备注:">
                        <span>{{collectionOrder.chaDesc}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3>收款日志</h3>
        <el-table v-loading="loading" :data="logList">
            <el-table-column label="操作人" prop="createdName" width="150"/>
            <el-table-column label="操作时间" prop="backDate" width="300">
                <template slot-scope="scope">
                    <span>{{ formatDate(scope.row.createdDate) }}</span>
                </template>
            </el-table-column>

            <el-table-column label="应收金额" prop="totalAmount" width="150"/>
            <el-table-column label="收款金额" prop="backAmount" width="150"/>
            <el-table-column label="备注" prop="comments"/>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageDto.pageNum"
                :limit.sync="queryParams.pageDto.pageSize"
                @pagination="getLogPage"
        />



        <!--<h3>收款明细</h3>-->
        <!--<div style="margin: 20px;">-->
            <!--<el-row :gutter="10" class="mb8">-->
                <!--<el-col :span="1.5">-->
                    <!--<el-button v-if="collectionOrder.waitPayAmount>0"-->
                            <!--type="primary"-->
                            <!--icon="el-icon-plus"-->
                            <!--size="mini"-->
                            <!--@click="handleAdd"-->
                    <!--&gt;新增-->
                    <!--</el-button>-->
                <!--</el-col>-->
            <!--</el-row>-->
        <!--</div>-->
        <!--<el-table v-loading="loading" :data="itemList">-->
            <!--<el-table-column label="收款时间" prop="backDate" width="300">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{ formatDate(scope.row.backDate, 'yyyy-MM-dd') }}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="收款金额" prop="itemBackAmount" width="150"/>-->
            <!--<el-table-column label="收款方式" prop="backType" width="250"/>-->
            <!--<el-table-column label="备注" prop="comments"/>-->
            <!--<el-table-column label="操作" align="center" width="300">-->
                <!--<template slot-scope="scope">-->
                    <!--<el-button-->
                            <!--size="small"-->
                            <!--type="warning"-->
                            <!--icon="el-icon-delete"-->
                            <!--@click="handleDelete(scope.row)"-->
                    <!--&gt;删除</el-button>-->
                <!--</template>-->
            <!--</el-table-column>-->
        <!--</el-table>-->
        <!--<pagination-->
                <!--v-show="total>0"-->
                <!--:total="total"-->
                <!--:page.sync="queryParams.pageDto.pageNum"-->
                <!--:limit.sync="queryParams.pageDto.pageSize"-->
                <!--@pagination="getItemPage"-->
        <!--/>-->

        <!--<el-dialog title="增加收款明细" :visible.sync="open" width="500px">-->
            <!--<el-form ref="form" :model="form" :rules="rules" label-width="120px">-->
                <!--<el-form-item label="还款时间" prop="backDate">-->
                    <!--<el-date-picker-->
                            <!--v-model="form.backDate"-->
                            <!--type="date"-->
                            <!--style="width: 300px"-->
                            <!--placeholder="选择日期">-->
                    <!--</el-date-picker>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="还款金额" prop="itemBackAmount">-->
                    <!--<el-input-number v-model="form.itemBackAmount" :min="0.00" :step="0.01" style="width: 300px"/>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="还款方式" prop="backType">-->
                    <!--<el-input v-model="form.backType" placeholder="请输入还款方式" style="width: 300px"/>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="备注" prop="comments">-->
                    <!--<el-input v-model="form.comments" placeholder="请输入备注" style="width: 300px"/>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
            <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button type="primary" @click="submitForm">确 定</el-button>-->
                <!--<el-button @click="cancel">取 消</el-button>-->
            <!--</div>-->
        <!--</el-dialog>-->

    </div>
</template>

<script>
  import { formatDate } from '@/utils/dateUtil'
  import { getOrderById ,getItemPage,saveItem,deleteItem,getLogPage} from '@/api/collectionOrder'

  export default {
    name: 'detail',
    data() {
      return {
        collectionOrder: {},
        collectionId: '',
        itemList:[],
        loading:false,
        total:0,
        queryParams:{
          pageDto: {
            pageNum: 1,
            pageSize: 10
          },
          criteria: {}
        },
        form:{},
        rules:{},
        open:false,
        logList:[],
      }
    },
    methods: {
      formatDate,
      getList() {
        getOrderById(this.collectionId).then(resp => {
          this.collectionOrder = resp.result
        })
      },
      handleAdd(){
        this.reset()
        this.open = true
      },
      cancel(){
        this.reset()
        this.open = false
      },
      reset(){
        this.form = {}
      },
      getLogPage(){
        getLogPage(this.queryParams).then(resp=>{
          this.logList = resp.result.list;
          this.total = resp.result.total;
        })
      },
      getItemPage(){
        getItemPage(this.queryParams).then(resp=>{
          this.itemList = resp.result.list;
          this.total = resp.result.total;
        })
      },
      submitForm(){
        let formData = {
          ...this.form,
          collectionId : this.collectionId,
          backDate:formatDate(this.form.backDate,'yyyy-MM-dd')
        }
        saveItem(formData).then(resp=>{
          if(!resp.hasError){
            this.cancel();
            this.getList();
            this.getItemPage()
          }
        })
      },
      handleDelete(row){
        this.$confirm('是否确认删除?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=> {
          deleteItem(row.id).then(resp=>{
            console.log(resp);
          })

        })
      },
    },
    mounted() {
      this.collectionId = sessionStorage.getItem('collectionId')
      this.queryParams.criteria.collectionId = this.collectionId;
      this.getList()
      // this.getItemPage()
      this.getLogPage()
    }
  }
</script>

<style scoped>

</style>
